<template>
	<view class="content bgf">
		<form @submit="submit">
			<u-navbar :is-back="true" :border-bottom="false">
				<view style="height: 10px;"></view>
				<view  class="slot-wrap disfr-lr p15 f32" style="width: 100%;">
					<view class="slot-wrap-left"></view>
					<view class="slot-wrap-center mt20">添加群成</view>
					<view class="slot-wrap-right pr">
						<button form-type="submit" style="height: 70rpx;background: none;">
							<view style="position: relative;top:-20rpx;">
								<u-icon name="duihao" custom-prefix="qxl-icon" size="44"></u-icon>
							</view>
						</button>
					</view>
				</view>
			</u-navbar>
			<view style="height: 5px;"></view>
			<my_navbar_ext height="38" bg-color="#ffffff">
				<view style="height: 38px;width: 100%;">
				  <u-search height="70" :disabled="false" @custom="searchGet" @search="searchGet" placeholder="输入手机/昵称/ID号" :show-action="true" v-model="keyword"></u-search>
				</view>
			</my_navbar_ext> 
			
			<view class="disf f32 mt50 mb40">
				<view @click="switchUser" data-id="0" :class="'mr50 pl30 '+(switcType == 0 ? 'fnow' : '')">关注</view>
				<view @click="switchUser" data-id="1" :class="switcType == 1 ? 'fnow' : ''">最近联系</view>
			</view>
			
			<view :class="'follows '+(switcType == 0 ? 'show' : 'hide')">
				<view class="main bto mt20">
					<checkbox-group name="member_ids">
					<view v-for="(item,index) in list" :key="item.id" class="disf f30">
						<view class="pt30 pl30 pb10 pr30">
							<image :src="item.head_pic" style="width:85rpx;height: 85rpx;"></image>
						</view>
						<view class="pt30 bbo" style="width: 600rpx;">
							<view class="f34 disfr-lr">
								<view>{{item.nickname}}</view>
								<view class="f28 col999 mr10">
									<checkbox :value="item.followed_id" style="transform:scale(0.7)" color="#2979ff"/>
								</view>
							</view>
							<view class="col999 mt5 f28 disfr-lr pr20">
								<view>ID号：{{item.followed_id}}</view>
								<view class="f26" style="background: #f4f4f4;border-radius: 20px;padding: 5rpx 10rpx;">
								<text v-if="item.sub_type" style="color:#f60;">我关注的</text>
								<text v-else>关注我的</text>
								</view>
							</view>
						</view>
					</view>
					</checkbox-group>
					
					<view v-if="list.length <= 0 && issearch" style="text-align: center;margin-top: 40%;">
						<view><u-icon name="wuneirong-copy" custom-prefix="qxl-icon" color="#999999" size="100"></u-icon></view>
						<view class="f32 col999 mt20">什么都木有哦</view>
					</view>
				</view>
			</view>
			
			<view :class="'recently p30 bto '+(switcType == 1 ? 'show' : 'hide')">
				<view v-if="$vuex.state.globalData.conversationList.length <= 0" style="text-align: center;margin: 100rpx;">
					<view><u-icon name="wuneirong-copy" custom-prefix="qxl-icon" color="#999999" size="100"></u-icon></view>
					<view class="f32 col999 mt20">还没有最近联系人哦</view>
				</view>
				<checkbox-group name="member_ids2">
					<view v-for="(item,index) in $vuex.state.globalData.conversationList" :key="item.conversationID">
						<view v-if="item.type == 'C2C' && item.userProfile.userID != $vuex.state.globalData.user.user_id" :class="'disf f30 '+(index > 0 ? 'mt20' : '')">
							<view class="pb10 pr20">
								<view style="height: 82rpx;overflow: hidden;border-radius:4px;">
									<u-image width="85rpx" height="85rpx" :src="item.userProfile ? item.userProfile.avatar : item.groupProfile.avatar">
										<template v-slot:error>
											<image src="/static/image/default-user.png" style="width:85rpx;height: 85rpx;"></image>
										</template>
									</u-image>
								</view>
							</view>
							<view class="bbo pb10" style="width: 600rpx;">
								<view class="f32 disfr-lr">
									<view>{{item.userProfile ? item.userProfile.nick : item.groupProfile.name}}</view>
									<view class="f28 col999">
										<checkbox :value="item.userProfile.userID" style="transform:scale(0.7)" color="#2979ff"/>
									</view>
								</view>
								<view class="col999 f28 pr" style="top:-10rpx;">ID号:{{item.userProfile ? item.userProfile.userID : item.groupProfile.name}}</view>
							</view>
						</view>
					</view>
				
				</checkbox-group>
			</view>
			
			
		</form>
		<loading :loading="not_load"/><!--加载状态-->
	    <pageload :page_load="page_load" :next_page="next_page" :list="list" /><!--分页加载状态-->
	</view>
</template>

<script setup>
import { onLoad, onShow, onHide, onReachBottom } from '@dcloudio/uni-app';
import { ref } from 'vue';	
const show_main=ref(false);
const not_load=ref(false);
const page_load=ref(false);
const next_page=ref('');
const list=ref([]);
const title=ref('添加群成员');
const keyword=ref('');
const issearch = ref(false);
const groupId=ref('');
//页面加载时
onLoad(async (options)=>{
	groupId.value=options.group_id;
	loadPage({},false);
});
// 
//页面显示时执行
onShow(()=>{
	
});
//页面隐藏时执行
onHide(()=>{
	
});
/**
 * 模板属性跳转页面
 * @param {Object} e
 */
function goPage(event){
	uni.$utils.dataSetPage(event);
};
/**
 * 加载接口数据
 * @param {Object} options  参数,对像数组 
 * @param {Object} isPage   是否加载大于1页
 */
const loadPage=async (options,isPage)=>{
	if(!options.group_id) options.group_id=groupId.value;
	let ret = await uni.$get('/appapi-config-getsubscribe',options);
	console.log(ret);
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info); 
		return;
	}
    page_load.value=false;
	show_main.value=true;
	not_load.value=true;
	next_page.value=ret.data.next_page;
	if(isPage) list.value=[...list.value,...ret.data.list];
	else list.value=ret.data.list;
};
//上拉触底加载分页
onReachBottom(()=>{
	if (!next_page.value) return;
	if (page_load.value) return;
	page_load.value=true;
	setTimeout(()=>{
	  loadPage(next_page.value, true); 
	},2000);
});
// 提交搜索
const searchGet=()=>{
	not_load.value=false;
	loadPage({keyword:keyword.value},false);
	switcType.value=0;
};
//提交群成员
const submit=async(e)=>{
	let form=e.detail.value;
	let member_ids=form.member_ids;
	let member_ids2=form.member_ids2;
	if(member_ids.length <= 0 && member_ids2.length <= 0){
		uni.$utils.showToast('未选择要加入群的成员');
		return;
	}
	let all_members=[];
	let j=0;
	for(let i=0;i<member_ids.length;i++) all_members[j++]=member_ids[i].toString();
	for(let i=0;i<member_ids2.length;i++) all_members[j++]=member_ids2[i].toString();
    //console.log(groupId.value,all_members);return;
	uni.TIM.addGroupMember(groupId.value,all_members,(data)=>{
		//console.log(data);
		uni.$utils.showToast('加入群聊成功',0,()=>{
			uni.navigateBack({data:1});
		});
	});
	
};
//切换好友
const switcType=ref(0);
const switchUser=(e)=>{
	let id=e.currentTarget.dataset.id;
	switcType.value=id;
	if(id == 1) {
		if(subscribeList.value.length <= 0){
			getSubscribe();
		}
	}
};
</script>

<style  lang="scss">
	page {
		background: #fff;
	}
	.fnow{color:#2979ff;}
</style>
